{% extends "base.html" %}
{% load	bootstrap3 %}
{% load i18n %}
{% load static %}
{% block header-css %}
    <link href="{% static 'css/plugins/ztree/ztreestyle/ztreestyle.css' %}" rel="stylesheet">
    <style>
    .ztree li span[class^="button icon-"] {
        display: inline-block;
	    width: 16px;
	    height: 16px;
        vertical-align: -3px;
        background-image: url(/static/img/icon/cvm-201812191038.png);
    }

    .ztree li span.button.icon-centos_ico_docu {
	    background-position: -252px -268px;
    }

    .ztree li span.button.icon-ubuntu_ico_docu {
	    background-position: -296px -54px;
    }

    .ztree li span.button.icon-windows_ico_docu {
	    background-position: -296px -72px;
    }

    .ztree li span.button.icon-debian_ico_docu {
	    background-position: -296px 0px;
    }

    </style>
{% endblock %}

{% block  title %}{% trans 'Server CMD' %}{% endblock %}



{% block page-content %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>{% trans 'Server CMD' %}</h2>
            <ol class="breadcrumb">
                <li>
                     <a href="/">{% trans 'Home' %}</a>
                </li>
                <li>
                    <a href="{% url "jobs:scripts_list" %}">{% trans 'Jobs Manage' %}</a>
                </li>
                <li class="active">
                    <strong>{% trans 'Server CMD' %}</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="ibox float-e-margins col-lg-12">
                <div class="col-sm-12 m-b-xs ibox-content">
                    <h5 class="tag-title"><font style="color: red">{% trans 'Note: Please enter the dangerous instructions incorrectly.' %}</font></h5>
                    <div class="pull-left input-group col-sm-10 has-success">
                        <div class="input-group-addon">root:~#</div>
                        <input type="text" class="typeahead_2 form-control " id="autocomplete" style="width: 50%" placeholder="{% trans 'Please enter the BASH command' %}">&nbsp;
                        <div class="col-md-5">
                            <select class="form-control" name="key" id="key">
                                <option value="" >------</option>
                                    {% for row in key_list %}
                                        <option value={{row.id}} >[{{ row.name }}]--{{row.user}}</option>
                                    {% endfor %}
                            </select>
                        </div>

                    </div>

                    <div class="container col-sm-2">
                        <button style="height: 34px" class="btn btn-primary btn-block dim"  >
                        <span class="bold">{% trans 'Begin execution' %}</span></button>
                    </div>

                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-lg-2" id="split-left">
                <div class="clearfix">
                    <div data-options="iconCls:'icon-save'" title="ztree事件">
                        <ul id="ztree4" class="ztree"></ul>
                    </div>
                </div>


            </div>
            <div class="col-lg-10" id="split-right">

                <div class="ibox float-e-margins">

                    <div class="ibox-title">
                        <h5>{% trans 'Server CMD' %}</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#" >{% trans 'Config Option 1' %}</a>
                                </li>
                                <li><a href="#" >{% trans 'Config Option 2' %}</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="table-responsive">

                            <form id="cha" class="form-horizontal" action="" method="GET">
                                {% csrf_token %}
                                <div class="pull-left"><input type="text" class="form-control" name="name" placeholder="{% trans 'Hostname' %},{% trans 'IP' %},{% trans 'Other_IP' %}" required></div>
                                &nbsp;
                                <button class="btn btn-sm btn-primary" type="submit">{% trans 'Query' %}</button>


                            </form>
                            <form id="del_form_asset_all" class="form-horizontal"
                                  action="" method="post">
                                {% csrf_token %}
                                <table class="table table-striped table-bordered table-hover dataTables-asset">
                                    <thead>
                                    <tr>
                                       <th width="20">
                                            <input type="checkbox" id="CheckedAll">
                                        </th>
                                        <th>{% trans 'HostName' %}</th>
                                        <th>{% trans 'Project Name' %}</th>
                                        <th>{% trans 'Product Name' %}</th>
                                        <th>{% trans 'Server Use Name' %}</th>
                                        <th>{% trans 'Working Environment Name' %}</th>
                                        <th>{% trans 'IP' %}</th>
                                        <th>{% trans 'Other_IP' %}</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% for   row   in   asset_list.object_list %}

                                        <tr class="gradeA" id="{{ row.id }}">
                                        <td><input type="checkbox" value="{{ row.id }}" name="id"></td>
                                        <td>{{ row.hostname }}
                                        </td>
                                        <td>{{ row.project.name }}</td>
                                        <td>{{ row.product.name }}</td>
                                        <td>{% for i in row.use_list %}{{ i.name }} {% endfor %}</td>
                                        <td>{{ row.work_env.name }}</td>
                                        <td>{{ row.ip }}</td>
                                        <td>{{ row.other_ip }}</td>
                                    </tr>
                                    {% endfor %}
                                    </tbody>

                                </table>
                                <div class="pull-right">
                                     <nav class="pagination">
                                     <li><a href="{% url "asset:asset_list" %}?page=1">{% trans 'Home' %}</a></li>

                                        {% if asset_list.has_previous %}
                                            <li class="long"><a href="?{{ asset_list.previous_page_number.querystring }}">{% trans 'Home' %}</a></li>
                                        {% endif %}

                                        {% for page in asset_list.pages %}
                                        {% if page %}
                                            {% ifequal page asset_list.number %}
                                                <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                            {% else %}
                                                 <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                            {% endifequal %}
                                        {% else %}
                                            <li class="none"><a href="">...</a></li>
                                        {% endif %}
                                        {% endfor %}
                                        {% if asset_list.has_next %}
                                            <li class="long"><a href="?{{ asset_list.next_page_number.querystring }}">{% trans 'Next' %}</a></li>
                                        {% endif %}
                                        <li>
                                            <a href="{% url "asset:asset_list" %}?page={{ asset_list.paginator.num_pages }}">{% trans 'Trailer' %}</a>
                                        </li>
                                        <li><span style="color: #0a0a0a">{% trans 'Total' %}: &nbsp;{{ asset_list.paginator.num_pages }} {% trans 'Page' %}</span>
                                        </li>
                                    </nav>
                                </div> <!--页码 -->
                            </form>


                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>



{% endblock %}
{% block footer-js %}
    <script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/plugins/typehead/bootstrap3-typeahead.min.js' %}"></script>
    <script>
    $(document).on('click', '.dim', function () {
            swal({
                title: '{% trans 'You Are Sure To execution' %}',
                text: '{% trans 'Cannot cancel after execution' %}',
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: '{% trans 'confirm' %}',
                cancelButtonText:'{% trans 'cancel' %}',
                closeOnConfirm: false
            }, function () {
                var asset_id = document.getElementsByName('id');
                asset_id_list = [];
                for (var i = 0; i < asset_id.length; i++) {
                    if (asset_id[i].checked) {
                        asset_id_list.push((asset_id[i].value));
                    }
                }
                var cmd = $('#autocomplete').val();
                var key = $('#key').val();

                $.ajax({
                    headers: {"X-CSRFToken": '{{ csrf_token }}'},
                    url: "{% url 'jobs:cmd_list' %}",
                    type: 'POST',
                    data: {'cmd': cmd,'key': key,"asset":asset_id_list},

                    success: function (data) {
                        var obj = JSON.parse(data);
                        var id = obj.id;
                        if (obj.status) {
                            location.href= "{% url 'jobs:execution_result' %}"+"?id="+id;
                        } else {
                            swal('{% trans 'execution Error' %}', '{% trans 'execution Error' %}' + "[ " + obj.error + " ]" + '{% trans 'Error' %}', "error");
                        }
                    }
                });


            });

        });



    $(function () {
                var setting = {
                    view: {
                        showLine: true,
                        selectedMulti: false,
                        dblClickExpand: false
                    },

                    data: {
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    },

                    callback: {
                        beforeClick: getCurrentNode,
                    }
                };

                $.ajax({
                    url: '{% url  'asset:asset_ztree' %}',
                    type: 'get',
                    data: '',
                    dataType: 'json',
                    success: function (data) {
                        zTreeObj = $.fn.zTree.init($("#ztree4"), setting, data);
                        zTreeObj.expandAll(true);
                    }
                });
            });

            function getCurrentNode(treeId, treeNode) {
                curNode = treeNode;
                zTreeOnClick(curNode);
            }

            function zTreeOnClick(treeNode) {
                if (treeNode.floor == 0 ) {
                    window.location.href = "{% url 'jobs:cmd_list' %}"
                }
                else if(treeNode.floor == 1) {
                    window.location.href = "{% url 'jobs:cmd_list' %}" + '?id=' + treeNode.id
                }else{
                    window.location.href = "{% url 'jobs:cmd_list' %}" + '?asset=' + treeNode.id
                }
            }
    </script>
    <script>
        $("#autocomplete").typeahead({
        loadingAnimation: true,
        fitToElement: false,
        items: 'all',
            source: function (query, process) {
                return $.ajax({
                    headers: {"X-CSRFToken": '{{ csrf_token }}'},
                    url: '{% url "jobs:execution_command" %}',
                    type: 'post',
                    data: {cmd: query},
                    success: function (result) {
                        $('#autocomplete').typeahead('close');
                        $('#autocomplete').focus();
                        return process(result.message);
                    },
                });
            }
        });
    </script>

{% endblock %}

{% block footer-js-ajax %}
{% endblock %}